import React from 'react'
import store from '../store/store'
import Lyric from 'lyric-parser'
import { connect } from 'react-redux'
import todown from '../assets/images/toDown.png'
require("./player/player.css")

//定义映射函数
//映射状态到ui组件的props
const mapStateToProps = (state) => {
    return {
        state
    }
}
class PLayer extends React.Component {
    constructor(props) {
        super(props)
        console.log(props)
        this.state = {
            isPlay: props.location.state.isPlay,
            songUrl: props.location.state.songUrl,
            al: props.location.state.songImg,
            ar: props.location.state.songArits,
            songName: props.location.state.songTitle,
            songId: props.location.state.songId,
            lyrSong:[]
        }
    }
    //  
    componentWillMount(props) {
console.log(this.props)
    }
    handler({ lineNum, txt }) {
        this.setState({
            lineNum
        })
        console.log(this.state.lineNum)
    }
    componentWillReceiveProps(props) {
        console.log(props)
        this.setState({
            isPlay: props.state.getPlay.isPlay,  
        })
        console.log(props.state.getlyric.lyric)
        let lyr = new Lyric(props.state.getlyric.lyric, this.handler.bind(this)),
        _this =this
        this.setState({
            lyrSong:lyr
        })
        lyr.play()
    }
    render() {
        let { ar, songName, al, isPlay, lyrSong } = this.state
        console.log(isPlay)
        console.log(lyrSong)
        return (
            < div className="player" style={{ background: ' url(' + al + ')  center center / 100% 100% no-repeat', }
            }>
                <img src={todown} alt="图片" className="playerTodownImg" onClick={() => {
                    this.props.history.go(-1)
}} />       
                <span style={{ color: "#ffcd32" }} className="playerName">{songName}</span>
                <h1 className="songerName">{ar}</h1>
                <img src={al} alt="" className={isPlay ? "playerImgCircle" : "playerImg"} />
                <div className="LyricShow">
                    <ul className="lyriclis">
                        {
                            typeof (lyrSong.lines) === 'undefined' ? <li></li> : lyrSong.lines.map((v, i) => (<li key={i} className={this.state.lineNum === i ? 'lyricColorShow' : 'lyricColor'}>{v.txt}</li>))
                        }
                    </ul>
                </div >
            </div >
        )
    }
}

export default connect(mapStateToProps)(PLayer)